<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter, RouterView } from 'vue-router'
import type { cssStyles, linkType } from './type'

const siderStyle: cssStyles = {
  backgroundColor: '#fff',
  height: '100%',
  borderRight: '1px solid rgba(230,230,230,0.5)'
}
const contentStyle: cssStyles = {
  height: '100%'
}

const links = ref<Array<linkType>>([
  { name: '支付场景', path: '/comp', id: 1 },
  { name: '支付组件', path: '/comp/cashier', id: 2 },
  { name: '车牌键盘', path: '/comp/keybord', id: 3 },
  { name: '选择区域', path: '/comp/address', id: 4 },
  { name: '协议授权', path: '/comp/agreement', id: 5 },
  { name: '支付宝领券', path: '/comp/alipayGetCoupon', id: 6 },
  { name: '积分展示', path: '/comp/balanceModule', id: 7 },
  { name: 'ColorUI', path: '/comp/colorui', id: 8 },
  { name: '图片广告', path: '/comp/banner', id: 9 },
  { name: '回到首页', path: '/comp/goHomeIcon', id: 10 },
  { name: '上传图片', path: '/comp/compressFile', id: 11 },
  { name: '点单套餐', path: '/comp/setMeal', id: 12 },
  { name: '交互弹窗', path: '/comp/confirm', id: 13 }
])

const route = useRoute()
const router = useRouter()
const current = ref<number>(1)
const chgCurrent = (data: linkType) => {
  current.value = data.id
  router.push(data.path)
}

watch(
  () => route.path,
  (nval) => {
    if (nval.includes('/comp/cashier')) {
      current.value = 2
    } else if (nval.includes('/comp/keybord')) {
      current.value = 3
    } else if (nval.includes('/comp/address')) {
      current.value = 4
    } else if (nval.includes('/comp/agreement')) {
      current.value = 5
    } else if (nval.includes('/comp/alipayGetCoupon')) {
      current.value = 6
    } else if (nval.includes('/comp/balanceModule')) {
      current.value = 7
    } else if (nval.includes('/comp/colorui')) {
      current.value = 8
    } else if (nval.includes('/comp/banner')) {
      current.value = 9
    } else if (nval.includes('/comp/goHomeIcon')) {
      current.value = 10
    } else if (nval.includes('/comp/compressFile')) {
      current.value = 11
    } else if (nval.includes('/comp/setMeal')) {
      current.value = 12
    } else if (nval.includes('/comp/confirm')) {
      current.value = 13
    } else {
      current.value = 1
    }
  },
  {
    immediate: true
  }
)
</script>

<template>
  <div class="comp-box">
    <a-layout :style="contentStyle">
      <a-layout-sider :style="siderStyle">
        <div class="linker-wrap flex-v-ss">
          <div
            class="linker"
            :class="{ active: item.id == current }"
            v-for="(item, inx) in links"
            :key="item.id"
            @click="chgCurrent(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </a-layout-sider>
      <a-layout-content :style="contentStyle">
        <div class="linker-view">
          <router-view v-slot="{ Component }">
            <transition mode="out-in" enter-active-class="enter" leave-active-class="leave">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<style scoped lang="scss">
.comp-box {
  @include size(100%, 100%);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 50;
  .linker-wrap {
    @include size(100%, 100%);
    padding: 24px 6px;
    position: relative;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    &:hover::-webkit-scrollbar {
      display: inline-block;
    }
    .linker {
      @include size(100%, 40px);
      @include font(14px, 40px, #333);
      transition: color 0.3s;
      padding-left: 40px;
      border-radius: 4px;
      margin: 2px 0;
      cursor: pointer;
      &:hover {
        background: rgba(240, 240, 240);
      }
      &.active {
        background: rgb(230, 244, 255);
        color: rgb(22, 119, 255);
      }
    }
  }
  .linker-view {
    @include size(100%, 100%);
    position: relative;
    position: relative;
    background: #fff;
    overflow: hidden;
    background: rgba(51, 180, 255, 0.05);
  }
}

.enter {
  animation: slideDown 0.4s ease;
}
.leave {
  animation: slideUp 0.4s ease;
}

@keyframes slideDown {
  from {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes slideUp {
  from {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
}
</style>
